<!--  -->
<template>
      <div class="background">
    <div class="border"></div>
    <div class="battleimage"></div>
    <div class="title">好友</div>
    <div class="title" style="left:63%">对战</div>
    <div class="battlefont">BATTLE</div>
    <div class="vsfont">VS</div>
    <div class="roomnumber">房间：{{roomId}}</div>
    <div class="userblock">
      <img :src="userInfo.avatarUrl" class="userimage"/>
      <div class="shade">{{userInfo.nickName}}<br>{{score}}</div>
    </div>
    <div class="userblock" style="left:61%; border-color:rgb(163, 5, 5); background-color: rgb(240, 81, 81)">
      <img :src="rivalInfo.avatarUrl" class="userimage"/>
      <div class="shade" style="background-color: rgb(230, 23, 64);">{{rivalInfo.nickName}}<br>{{rivalInfo.score}}</div>
    </div>
    <button class="invitebutton" open-type="share">邀请好友</button>
    <button v-if="!isPrepare" class="startbutton" @click="prepare">准备</button>
    <button v-else class="startbutton" @click="cancelPrepare">等待对方</button>
    <button class="returnbutton" @click="exit">
      <img  src="../../../static/images/returnbutton.jpg" style="position:absolute; width:30px; height:30px"/>
    </button>
  </div>
</template>

<script>
import httpkit from '../../utils/http-kit'
import store from '../../utils/store'
export default {
  data () {
    return {
      userInfo: {},
      score: 0,
      isPrepare: false,
      rivalInfo: {
        id: '',
        nickName: '空',
        avatarUrl: '/static/images/unknownuser.jpg'
      },
      roomId: ''
    }
  },
  onLoad () { // 清空数据重新加载
    Object.assign(this.$data, this.$options.data())
  },
  mounted () {
    console.log('roomId=' + store.state.roomid + '&&rivalId=' + store.state.userid)
    this.userInfo = store.state.userInfo
    console.log(store.state.rivalInfo)
    if (store.state.rivalInfo !== null) {
      this.rivalInfo = store.state.rivalInfo
    }
    this.score = store.state.score
    this.roomId = store.state.roomid

    var client = store.state.client // 添加

    var _this = this
    client.on('message', function (topic, message) {
      var jsMsg = JSON.parse(message)
      switch (jsMsg.type) {
        case 'JoinRoom' : {
          _this.rivalInfo = jsMsg.waitingUser
          _this.isAttend = true
          break
        }
        case 'QuitRoom': {
          if (_this.rivalInfo.id === parseInt(jsMsg.userId)) {
            _this.rivalInfo = {
              id: '',
              nickName: '空',
              avatarUrl: '/static/images/unknownuser.jpg'
            }
            break
          }
        }
      }
    })
  },
  methods: {
    exit () { // 退出房间
      httpkit.get('/match/exit', {
        id: store.state.userid,
        roomId: this.roomId
      })
      wx.redirectTo({
        url: '../index/main'
      })
    },
    resetRival () {
      this.rivalInfo = {
        id: '',
        nickName: '空',
        avatarUrl: '/static/images/user.png'
      }
    },
    prepare () { // 开始准备
      var _this = this
      httpkit.get('/match/prepare', {
        id: store.state.userid,
        roomId: store.state.roomid
      }).then(res => {
        _this.isPrepare = true
        console.log(res.message)
      })
    },
    cancelPrepare () { // 取消准备
      var _this = this
      httpkit.get('/match/cancelPrepare', {
        id: store.state.userid,
        roomId: store.state.roomid
      }).then(res => {
        console.log(res.message)
        _this.isPrepare = false
      })
    }
  },
  onShareAppMessage: function (ops) {
    // var _this = this
    if (ops.from === 'button') {
      // 来自页面内转发按钮
      console.log(ops.target)
    }
    return {
      title: '好友邀请你参加答题对战', // 这里是定义转发的标题
      path: '/pages/login/main?roomId=' + store.state.roomid + '&&rivalId=' + store.state.userid, // 这里是定义转发的地址
      desc: '我是全世界最帅的程序猿',
      success: function (res) {
        // 转发成功
        console.log(this.path)
        console.log('转发成功:' + JSON.stringify(res))
      },
      fail: function (res) {
        // 转发失败
        console.log('转发失败:' + JSON.stringify(res))
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.background{
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563346992546&di=efb2b0b18dbe688c2d59583d912278c8&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201404%2F27%2F20140427173934_KArWk.jpeg)
}
.border{
  position: absolute;
  top: 19.5%;
  left: 4%;
  width: 92%;
  height: 43%;
  border-radius: 15px;
  background-color: black;
  opacity: 0.5;
}
.battleimage{
  position: absolute;
  top: 13%;
  left: 39%;
  width: 22%;
  height: 12.5%;
  border-radius: 50%;
  background-image: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563360182300&di=bbf889e95359c3a56f6ee1083ea6d893&imgtype=0&src=http%3A%2F%2Fpic169.nipic.com%2Ffile%2F20180613%2F26523992_095417222032_2.jpg);
  background-position: center;
  background-size: 340%;
}
.title{
  position: absolute;
  top: 15.5%;
  left: 18%;
  color:white;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 8px;
  text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
.battlefont{
  position: absolute;
  top: 22%;
  left: 40.5%;
  color:white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  text-shadow: 3px 3px 5px rgb(72, 218, 255);
}
.vsfont{
  position: absolute;
  top: 38%;
  left: 45%;
  color: yellow;
  font-family: "MV Boli";
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 3px;
}
.roomnumber{
  position: absolute;
  top: 25%;
  left: 37%;
  width: 26%;
  height: 3.5%;
  border-radius: 0 0 12px 12px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.userblock{
  position: absolute;
  top: 30.5%;
  left: 11%;
  width: 26%;
  height: 19.5%;
  border-radius: 24px;
  border-style: solid;
  border-width: 4%;
  border-color: rgb(29, 75, 112);
  background-color: deepskyblue;
}
.userimage{
  margin-top: 16%;
  margin-left: 23.5%;
  width: 50%;
  height: 38.5%;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: white;
}
.shade{
  margin-top: 2%;
  margin-left: 5%;
  width: 90%;
  height: 36%;
  border-radius: 0 0 18px 18px;
  background-color: rgb(17, 155, 235);
  color: white;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  overflow: scroll;
}
.invitebutton{
  top: 53.5%;
  width: 34%;
  height: 7%;
  color: white;
  border-radius: 15px;
  background-color: gold;
  box-shadow: 0 2px 4px yellow inset,0 -2px 0 goldenrod inset;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 2px 2px 2px rgb(206, 153, 20);
  display: flex;
  justify-content: center;
  align-items: center;
}
.startbutton{
  top: 75%;
  width: 40%;
  height: 9%;
  color: white;
  border-radius: 18px;
  background-color: gold;
  box-shadow: 0 3px 6px yellow inset,0 -3px 0 goldenrod inset;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 5px;
  text-shadow: 2px 2px 2px rgb(206, 153, 20);
  display: flex;
  justify-content: center;
  align-items: center;
}
.returnbutton{
  position: absolute;
  top: 4.5%;
  left: 4%;
  width: 20px;
  height: 38px;
  border-radius: 50%;
  border-style: solid;
  border-width: 3px;
  border-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
</style>